<div class="fuwuqibox">
    <ul>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                    style="width: 60%">60%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                    style="width: 20%">20%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"
                    style="width: 35%">35%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                    style="width: 70%">70%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                    style="width: 100%">100%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                    style="width: 60%">60%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
                    style="width: 30%">30%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
        <li>
            <label for="">服务器</label>
            <div class="progress">
                <div class="progress-bar progress-bar-danger active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                    style="width: 20%">20%
                    <!-- <span class="sr-only">45% Complete</span> -->
                </div>
            </div>
        </li>
    </ul>
</div>

<style>
    .fuwuqibox li {
        float: left;
        width: 32%;
        text-align: center;
        border: steelblue solid 2px;
        margin-left: 1%;
        margin-bottom: 10px;
        border-radius: 10px;
        padding: 10px;
    }
</style>
<script>
    $('.fuwuqibox li').hover(
        function () {
            $(this).css({ 'border': 'red solid 2px' })
        },
        function () {
            $(this).css({ 'border': 'steelblue solid 2px' })
        }
    )
</script>